<template>
    <div class="app-container">
        <Header></Header>
        <h1>App 根组件</h1>
        <Goods v-for="item in list" :key="item.id"
               :id="item.id"
               :title="item.goods_name"
               :pic="item.goods_img"
               :price="item.goods_price"
               :state="item.goods_state"
               :count="item.goods_count"
               @state-change="getNewState"
        ></Goods>
        <Footer :isfull="fullState" :amount="amt" :all="total" @state-change="getFullChange"></Footer>
    </div>
</template>

<script>
import Header from "./components/Header/Header.vue";
import axios from "axios";
import Goods from "@/components/Goods/Goods.vue";
import Footer from "@/components/Footer/Footer.vue";
import bus from '@/components/eventBus'

export default {
    data() {
        return {
            // 存储数据
            list: []
        }
    },
    created() {
        this.initCartList()
        //     注册绑定事件
        bus.$on('share', (val) => {
            this.list.some(item => {
                if (item.id === val.id) {
                    item.goods_count = val.value
                    return true
                }
            })
        })
    },
    components: {
        Header,
        Goods,
        Footer
    },
    computed: {
        total(){
            return this.list.filter(item=>item.goods_state).reduce((t,item)=>{
                return t += item.goods_count
            },0)
        },
        // 通过计算属性动态计算全选状态
        fullState() {
            return this.list.every(item => item.goods_state)
        },
        // 总价
        amt() {
            return this.list.filter(item => item.goods_state).reduce((total, item) => {
                {
                    return total += item.goods_price * item.goods_count
                }
            }, 0)
        }
    },
    methods: {
        getFullChange(val) {
            this.list.forEach(item => item.goods_state = val)
        },
        getNewState(val) {
            this.list.some(item => {
                if (item.id === val.id) {
                    item.goods_state = val.value
                    return true
                }
            })
        },
        async initCartList() {
            // const {data:res} = await axios.get('https://www.fastmock.site/mock/ebf0f0d20dd578a20cacede822b8255f/shop/cart')
            // console.log(res)
            this.list = [
                {
                    "id": 1,
                    "goods_count": 1,
                    "goods_img": "http://t14.baidu.com/it/u=43462758,1432062369&fm=224&app=112&f=JPEG?w=500&h=500",
                    "goods_name": "辰米范 法式收腰连衣裙女显瘦新款设计感露背黑色v领泡泡袖长裙子",
                    "goods_price": 188.00,
                    "goods_state": false
                },
                {
                    "id": 2,
                    "goods_count": 1,
                    "goods_img": "https://img14.360buyimg.com/imgzone/jfs/t1/195902/5/25856/287194/62b36d0bEbd86d5b8/df3db4bd5bc056a9.jpg",
                    "goods_name": "质感至上 精致贵女风 金属丝星云升级版日本三醋酸连衣裙",
                    "goods_price": 998.00,
                    "goods_state": false
                },
                {
                    "id": 3,
                    "goods_count": 2,
                    "goods_img": "https://inews.gtimg.com/newsapp_bt/0/8111639339/1000",
                    "goods_name": "高知疏离 高氧分小洋裙 空气感高包容重磅珍珠缎双层真丝",
                    "goods_price": 288.00,
                    "goods_state": true
                },
                {
                    "id": 4,
                    "goods_count": 1,
                    "goods_img": "http://t13.baidu.com/it/u=2480967665,3117449742&fm=224&app=112&f=JPEG?w=500&h=500",
                    "goods_name": "好养眼 金高银式素美人气质 优雅生姿 竹节轻麻感空气裙",
                    "goods_price": 198.00,
                    "goods_state": true
                },
                {
                    "id": 5,
                    "goods_count": 1,
                    "goods_img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0c873895-112e-4286-b797-9f0fdae3dff2%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692368179&t=7d482246a02b7bafa81aff12d8e36afe",
                    "goods_name": "女童连衣裙2023新款夏季儿童泡泡袖裙子女孩蓬蓬公主裙礼服童装夏",
                    "goods_price": 79.00,
                    "goods_state": true
                }
            ]
        }
    }
}
</script>

<style lang="less" scoped>
.app-container {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>
